<template>
	<view class="g-input-wrap">
		<view class="g-input"  :class="[acLineClass]">
			<input type="text" :placeholder="placeholder"
			v-model="inputVal"
			 confirm-type="search"
			  @focus="inputFocus"
			  @blur="onblur"
			 @confirm="searchConfirm"
			 class="uni-input"
			 placeholder-class="placeholder-class" />
			 <view class="search-icon-wrap" v-if="clearable">
				 <view @click="clearData" v-show="showClear">
					 <i class="iconfont icon-shanchu1 icon"></i>
				 </view>
			 </view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'g-empty',
	data() {
		return {
			acLineClass:'',
			showClear:false,
			inputVal:null,
		};
	},
	props: {
		placeholder:{
			type:String,
			default:'请输入文本'
		},
		value:'',
		clearable:{
			default:false
		}
	},
	methods: {
		searchConfirm(){
			//确认搜索事件
			uni.hideKeyboard()
			this.$emit("confirm",this.inputVal)
		},
		clearData(){
			//清除数据
			this.inputVal = ''
			this.$emit("clear",this.inputVal)
		},
		onblur(e){
			//失去焦点
			setTimeout(()=>{
				//延迟关闭，防止点击不上
				this.showClear = false
			},100)
			this.acLineClass=''
			this.$emit("blur",e)
		},
		inputFocus(e){
			//获取焦点
			this.showClear = true
			this.acLineClass = 'g-input-acline'
			this.$emit("focus",e)
		},
	},
	computed: {
	},
	watch:{
		inputVal(n,o){
			this.$emit("input",n)
		},
		value(n,o){
			this.inputVal = n
		}
	},
	created() {
		this.inputVal = this.value
	}
};
</script>
<style lang="scss" scoped>
@import '../../theme.scss';
	@import "../../iconfont.css";
	.g-input-wrap{
		width: 460rpx;
		display: inline-block;
	}
	.icon{
		color: #cacaca;
	}
.uni-input {
	width: 100%;
	color: $g-text-darker;
	font-size: 28rpx;
}
.placeholder-class {
	color: $g-text-dark;
	font-size: 28rpx;
}
.g-input {
	position: relative;
	display: flex;
	align-items: center;
	height: 64rpx;
	padding: 0 16rpx;
	border-radius: 12rpx;
	border: 2rpx solid #f0f0f0;
	transition: 0.2s linear;
	&-acline{
		border: 2rpx solid $g-main-primary;
		box-shadow: 0 0 10rpx 1rpx mix($g-main-primary, #dadada,20%);
	}
}
.search-icon-wrap{
	position: absolute;
	display: flex;
	align-items: center;
	right: 0;
	height: 100%;
	width: 50rpx;
}
</style>
